// 空状态

<template>
  <view class="empty-box">
    <view v-for="item in emptyArr" :key="item.type">
      <view v-if="type == item.type" class="image-text-box">
        <image :src="item.image" mode="widthFix" />
        <view class="empty-title">{{ item.title }}</view>
        <view class="empty-desc">{{ item.desc }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      emptyArr: [
        {
          type: 'no_order',
          image: require('../static/image/empty/订单为空.png'),
          title: '暂无订单',
          desc: '您还没有订货单，去看看吧'
        },
        {
          type: 'no_goods',
          image: require('../static/image/empty/购物车为空.png'),
          title: '订货单无商品',
          desc: '快去添加一些商品吧'
        },
        {
          type: 'no_address',
          image: require('../static/image/empty/没有收货地址.png'),
          title: '没有地址',
          desc: '您还没有收货地址哟'
        },
        {
          type: 'no_store',
          image: require('../static/image/empty/没有收货地址.png'),
          title: '暂无自取地址',
          desc: ''
        },
        {
          type: 'no_network',
          image: require('../static/image/empty/没有wifi.png'),
          title: '网络出错了',
          desc: '检查您的手机是否联网'
        },
        {
          type: 'no_data',
          image: require('../static/image/empty/数据为空.png'),
          title: '暂无数据',
          desc: ''
        },
        {
          type: 'no_history',
          image: require('../static/image/empty/无历史记录.png'),
          title: '暂无数据',
          desc: ''
        },
        {
          type: 'no_message',
          image: require('../static/image/empty/消息为空.png'),
          title: '暂无消息',
          desc: ''
        },
        {
          type: 'no_result',
          image: require('../static/image/empty/暂无搜索结果.png'),
          title: '暂无搜索结果',
          desc: '试试搜索一些别的吧'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.image-text-box {
  margin-top: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  image {
    width: 400rpx;
  }
  .empty-title {
    margin-top: -50rpx;
    font-size: 36rpx;
    color: #666666;
  }
  .empty-desc {
    color: #999999;
  }
}
</style>
